{% extends 'web/layout/manage.html' %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="{% static 'web/css/wiki.css' %}">
    <link rel="stylesheet" href="{% static 'web/plugin/editor.md-master/css/editormd.min.css' %}">
    <style>
        .editormd-fullscreen{
            z-index: 1007;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid project">
        <div class="panel panel-default">
              <div class="panel-heading">
                  <div>
                    <i class="fa fa-book" aria-hidden="true"></i> wiki文档
                  </div>
                  <div class="function" >
                           <a type="button" class="btn btn-success btn-xs" href="{% url 'wiki_add' project_id=request.tracer.project.id %}">
                                <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建
                           </a>
                  </div>
              </div>
              <div class="panel-body">
                  <div class="col-sm-3 title-list">
                     <ul id="catalog">
                          <!--<li>
                              <a>目录1</a>
                              <ul>
                                  <li><a>子目录1</a></li>
                                  <li><a>子目录2</a></li>
                                  <li><a>子目录3</a></li>
                              </ul>
                          </li>
                          <li>
                              <a>目录2</a>
                          </li>
                          <li>
                              <a>目录3</a>
                              <ul>
                                  <li><a>子目录1</a></li>
                                  <li><a>子目录2</a></li>
                                  <li><a>子目录3</a></li>
                              </ul>
                          </li> -->

                     </ul>

                  </div>
                  <div class="col-sm-9 content" style="text-align:left">

                      <form method="post" novalidate>
                          {% csrf_token %}
                          {% for field in form %}
                              {% if field.name == 'content' %}
                                  <div class="form-group" >
                                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    <div id="editor">
                                        {{ field }}
                                    </div>
                                    <span class="error-msg">{{ field.errors.0 }}</span>
                                  </div>
                              {% else %}
                                  <div class="form-group" >
                                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                        {{ field }}
                                    <span class="error-msg">{{ field.errors.0 }}</span>
                                  </div>
                              {% endif %}
                          {% endfor %}
                          <button type="submit" class="btn btn-primary">提 交</button>
                        </form>
                  </div>
              </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script src="{% static 'web/plugin/editor.md-master/editormd.min.js' %}"></script>
    <script>
    var WIKI_DETAIL_URL = "{% url 'wiki' project_id=request.tracer.project.id %}"
    var WIKI_UPLOAD_URL = "{% url 'wiki_upload' project_id=request.tracer.project.id %}"
        $(function (){
            initCatalog();
            initEditorMd();
        });
    /*初始化md编辑器，editormd('editor'参数editor代表的是标签id属性的值是editor的标签。textarea输入框变成md编辑器*/
        function initEditorMd(){
            editormd('editor',{
                placeholder:"请输入内容",
                height:500,
                path:"{% static 'web/plugin/editor.md-master/lib/' %}",
                imageUpload:true,
                imageFormats:["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL:WIKI_UPLOAD_URL,
            })
        }

        function initCatalog(){
            $.ajax({
                url:"{% url 'wiki_catalog' project_id=request.tracer.project.id %}",
                type:"GET",
                data:"",
                dataType:"JSON",
                success:function (res){
                    //console.log(res)
                    if(res.status){
                        $.each(res.data,function (index,item){
                            var href = WIKI_DETAIL_URL + "?wiki_id=" + item.id
                            var li = $("<li>").attr('id','id_' + item.id).append($('<a>').text(item.title).attr('href',href)).append($('<ul>'));
                            if(!item.parent_id){
                                // 生成这个标签<li><a>子目录1</a></li>，并添加到标签：<ul id="catalog">中
                                $('#catalog').append(li);
                            }else {
                                $('#id_' + item.parent_id).children('ul').append(li);
                            }
                        })
                    }
                }
            })
        }
    </script>
{% endblock %}












